<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gundong2</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		#div1{
			width: 1200px;
			height: 400px;
			margin: 100px auto;
			position: relative;
			background: red;

		}
		#div1 ul{
			position: absolute;
			left:0;
			top:0;
		}
		#div1 ul li{
			float: left;
			list-style: none;

		}

	</style>
	<script>
		window.onload=function () {
			var oDiv=document.getElementById("div1");
			var oUl=oDiv.getElementsByTagName("ul")[0];
			oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
			aLi=oUl.getElementsByTagName("li");
			oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
			setInterval(function () {
				oUl.style.left=oUl.offsetLeft-2+"px";

			},30);


		}
	</script>
</head>
<body>
<div id="div1">
	<ul>
		<li><img src="../../img/duo1.png" width="300px" height="400px"></li>
		<li><img src="../../img/duo2.png" width="300px" height="400px"></li>
		<li><img src="../../img/duo3.png" width="300px" height="400px"></li>
		<li><img src="../../img/duo4.png" width="300px" height="400px"></li>

	</ul>

</div>

</body>
</html>